<template>
  <el-row>
    <el-collapse-item title="数据设置" name="12">
      <el-form-item label="数据类型">
        <el-radio-group v-model="activeData.dataType" size="small" @change="dataTypeChange">
          <el-radio-button label="static">静态数据</el-radio-button>
          <el-radio-button label="dynamic">远端数据</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="数据设置" v-if="activeData.dataType==='static'">
        <el-button @click="showData(activeData.option.defaultValue)">查看</el-button>
      </el-form-item>
      <el-form-item label="数据接口" v-if="activeData.dataType==='dynamic'">
        <interface-dialog :value="activeData.propsApi" :title="activeData.propsName"
          popupTitle="数据接口" @change="propsApiChange" />
      </el-form-item>
      <el-form-item label="参数设置" v-if="activeData.dataType==='dynamic' && activeData.templateJson.length">
        <SelectInterfaceBtn :templateJson="activeData.templateJson" :showSystemFormId="false"
          :type="2" />
      </el-form-item>
      <template v-if="activeData.dataType === 'dynamic' && activeData.propsApi  && activeData.jnpfKey != 'rankList'">
        <el-form-item label="映射关系"/>
        <el-table :data="activeData.mappingConfig" style="width: 100%;">
          <el-table-column prop="field" label="字段" width="100"/>
          <el-table-column prop="value" label="映射" >
            <template slot-scope="scope">
              <el-autocomplete v-model="scope.row.value" :fetch-suggestions="querySearchAsync"
                clearable placeholder="请输入"  @select="handleSelect($event,scope.$index)"
                style="width:100%">
                <template slot-scope="{ item }">
                  <div class="sale-order-popper-item">
                    <span>{{ item.defaultValue }}</span>
                  </div>
                </template>
              </el-autocomplete>
            </template>
          </el-table-column>
        </el-table>

      </template>
      <template v-if="activeData.jnpfKey == 'rankList'">
        <el-divider>列表字段</el-divider>
        <draggable :list="activeData.option.columnOptions" :animation="340" group="selectItem"
          handle=".option-drag">
          <div v-for="(item, index) in activeData.option.columnOptions" :key="index"
            class="select-item">
            <div class="select-line-icon option-drag">
              <i class="icon-ym icon-ym-darg" />
            </div>
            <el-input v-model="item.label" placeholder="列名" size="small" />
            <el-input v-model="item.value" placeholder="字段" size="small" v-if="!activeData.propsApi"/>
            <el-autocomplete v-model="item.value" :fetch-suggestions="querySearchAsync" v-else
              clearable placeholder="字段"  @select="handleSelectRank($event,index)"
              style="width:100%">
              <template slot-scope="{ item }">
                <div class="sale-order-popper-item">
                  <span>{{ item.defaultValue }}</span>
                </div>
              </template>
            </el-autocomplete>
            <div class="close-btn select-line-icon" @click="delSelectItem(index)"
              :class="{'opacity5':activeData.option.columnOptions.length==1}">
              <i class="el-icon-remove-outline" />
            </div>
          </div>
        </draggable>
        <div style="margin: 0 0 15px 29px">
          <el-button style="padding-bottom: 0" icon="el-icon-circle-plus-outline" type="text"
            @click="addSelectItem">
            添加字段
          </el-button>
        </div>
      </template>
      <div v-if="activeData.option.styleType==7&&activeData.jnpfKey=='barChart'">
        <el-table :data="activeData.option.barType">
          <el-table-column prop="title" label="系列" />
          <el-table-column prop="type" label="类型">
            <template slot-scope="scope">
              <el-select v-model="scope.row.type" placeholder="请选择分格类型" filterable>
                <el-option v-for="(item, index) in barTypeList" :key="index" :label="item.label"
                  :value="item.value" />
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <Refresh v-if="activeData.dataType==='dynamic'&&activeData.propsApi"
        :refresh="activeData.refresh" />
    </el-collapse-item>
    <JSONArea v-if="areaVisible" ref="JSONArea" @refresh="updateOption" />
  </el-row>
</template>
<script>
const barTypeList = [
  { label: '柱体', value: 'bar' },
  { label: '折线', value: 'line' }
]
const mappingList = [
  { id: 1, field: '系列', value: '' },
  { id: 2, field: '维度', value: '' },
  { id: 3, field: '数值', value: '' },
  { id: 4, field: '最大值', value: '' },
  { id: 5, field: '时间戳', value: '' },
  { id: 6, field: '经度', value: '' },
  { id: 7, field: '纬度', value: '' },
];
import { getDataInterfaceInfo } from '@/api/systemData/dataInterface';
import SelectInterfaceBtn from '@/components/SelectInterfaceBtn'
import JSONArea from '../../components/JSONArea'
import InterfaceDialog from '@/components/Process/PropPanel/InterfaceDialog'
import Refresh from '../common/Refresh'
import draggable from 'vuedraggable';
export default {
  props: ['activeData'],
  components: {
    draggable,
    JSONArea,
    InterfaceDialog,
    Refresh,
    SelectInterfaceBtn
  },
  data() {
    return {
      allOptions:[],
      areaVisible: false,
      barTypeList: barTypeList,
      showParameter: false
    }
  },
  watch:{
    "activeData.i":{
      handler(val){
        this.activeData.mappingConfig = this.initMappingConfig();
      } ,
      deep:true,
    }
  },
  mounted(){
    // /初始化映射关系
    this.activeData.mappingConfig = this.initMappingConfig();
    this.initFieldData()
  },
  methods: {
    initMappingConfig() {
      if (this.activeData?.mappingConfig && this.activeData?.mappingConfig?.length) return this.activeData.mappingConfig;
      if (['barChart', 'pieChart', 'lineChart'].includes(this.activeData.jnpfKey)) return mappingList.filter(o => [1, 2, 3].includes(o.id));
      if (['radarChart'].includes(this.activeData.jnpfKey)) return mappingList.filter(o => [1, 2, 3, 4].includes(o.id));
      if (['timeAxis'].includes(this.activeData.jnpfKey)) return mappingList.filter(o => [2, 5].includes(o.id));
      if (['mapChart'].includes(this.activeData.jnpfKey)) return mappingList.filter(o => [2, 3, 6, 7].includes(o.id));
    },
    handleSelect(item, index) {
      this.activeData.mappingConfig[index].value = item.defaultValue
    },
    handleSelectRank(item, index) {
      this.activeData.option.columnOptions[index].value = item.defaultValue
    },
    initFieldData() {
      if (!this.activeData.propsApi || this.activeData.dataType === 'static') return (this.allOptions = []);
      getDataInterfaceInfo(this.activeData.propsApi).then(res => {
        const data = res.data;
        this.allOptions = data.fieldJson ? JSON.parse(data.fieldJson) : [];
      });
    },
    querySearchAsync(queryString, cb) {
      var results = queryString ? this.allOptions.filter(this.createStateFilter(queryString)) : this.allOptions;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.defaultValue.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    addSelectItem() {
      this.activeData.option.columnOptions.push({
        value: '',
        label: ''
      })
    },
    delSelectItem(index) {
      if (this.activeData.option.columnOptions.length > 1) this.activeData.option.columnOptions.splice(index, 1)
    },
    showData(option) {
      this.areaVisible = true
      this.$nextTick(() => {
        this.$refs.JSONArea.init(option)
      })
    },
    updateOption(data) {
      this.activeData.option.defaultValue = data ? JSON.parse(data) : []
    },
    dataTypeChange() {
      this.activeData.propsApi = ''
      this.activeData.propsName = ''
    },
    propsApiChange(val, item) {
      if (val) {
        this.activeData.propsApi = val
        this.activeData.propsName = item.fullName
        this.activeData.templateJson = item.parameterJson ? JSON.parse(item.parameterJson).map(o => ({ ...o, relationField: '', sourceType: 2 })) : []
        this.allOptions = item.fieldJson ? JSON.parse(item.fieldJson).map(o => ({ ...o, value: o.defaultValue })) : [];

      } else {
        this.activeData.propsApi = ''
        this.activeData.propsName = ''
        this.allOptions = []
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.opacity5 {
  opacity: 0.5;
}
::v-deep .select-item,
.select-item {
  display: flex;
  border: 1px dashed #fff;
  box-sizing: border-box;
  & .el-input + .el-autocomplete {
    margin-left: 4px;
  }
  & + .select-item {
    margin-top: 4px;
  }
  &.sortable-chosen {
    border: 1px dashed #409eff;
  }
  .select-line-icon {
    line-height: 32px;
    font-size: 22px;
    padding: 0 4px;
    color: #606266;
    .icon-ym-darg {
      font-size: 20px;
      line-height: 31px;
      display: inline-block;
    }
  }
  .close-btn {
    cursor: pointer;
    color: #f56c6c;
  }
  .option-drag {
    cursor: move;
  }
}
</style>
